<template>
    <div class="knowledge">
        <van-nav-bar title='咖啡调制' left-text="返回" left-arrow @click-left="onClickLeft" />
        <div class="konw-img">
            <img src="../../static/images/konw2.jpg" alt="" srcset="">
        </div>
        <div class="konw-con">
            <div class="konw-title1">
                <h1>
                    咖啡调制
                </h1>
                <p>

                    咖啡器并不是调制美味咖啡的唯一因素。咖啡调制的四要素分别是比例、研磨度、水、新鲜度。
                </p>
            </div>
            <div class="konw-title2">
                <p>如果您具有调制咖啡的基本常识，您就可以利用咖啡压滤壶、家用咖啡壶和浓缩意式咖啡器来调制美味咖啡。</p>
            </div>
            <div class="konw-title3">
                <h1>比例</h1>

                <div class="title3-img">
                    <img src="	https://www.starbucks.com.cn/coffee-blog/images/4-fundamentals-proportion.gif" alt=""
                        srcset="">
                </div>
                <p>要掌握好咖啡粉和水的比例——这是调制美味咖啡过程中关键的步骤。为了让您调制出效果上佳的咖啡，我们建议您用180毫升水与10克咖啡粉进行搭配。如果您觉得用这种方式调制出来的咖啡饮品的味道太浓，您可以再往里加点热水。
                </p>
                <p style="font-weight: 600;">10克咖啡需用180毫升水调制。 两勺约为10克。</p>
            </div>
            <div class="konw-title4">
                <h1>
                    研磨度
                </h1>
                <div class="title4-img">
                    <img src="https://www.starbucks.com.cn/coffee-blog/images/4-fundamentals-grind.gif" alt="" srcset="">
                    <p>不同的调制方式对咖啡研磨的程度有不同的要求。但总的来说，调制的时间越短，对咖啡研磨的程度就越高。例如，用在浓缩咖啡机上的咖啡粉必须非常精细，因为调制的时间只有18到23秒左右。但是，用在咖啡压壶上的咖啡粉可以粗糙一些，因为水和咖啡粉有四分钟直接接触的机会。
                    </p>
                    <ul>
                        <li>浓缩咖啡机：特别细的咖啡粉</li>
                        <li>滴滤咖啡机：中等粗细的咖啡粉</li>
                        <li>咖啡压滤壶：粗的咖啡粉</li>
                    </ul>
                    <p style="font-weight: 600;">调制的时间越短，对咖啡研磨的程度就越高。</p>
                </div>
            </div>
            <div class="konw-title5">
                <h1>水</h1>

                <div class="title5-img">
                    <img src="	https://www.starbucks.com.cn/coffee-blog/images/4-fundamentals-water.gif" alt="" srcset="">
                </div>
                <p>一杯咖啡中，98%的成分都是水，所以您用来调制咖啡的水必须清洁、新鲜、不含杂质。最好将水加热到90摄氏度到96摄氏度，这种温度的热水可以萃取咖啡所有的风味。温度不够的水不可用。
                </p>
                <p style="font-weight: 600;">水越纯净，越能制作出一杯好咖啡。</p>
            </div>
            <div class="konw-title6">
                <h1>新鲜度</h1>

                <div class="title6-img">
                    <img src="	https://www.starbucks.com.cn/coffee-blog/images/4-fundamentals-freshness.gif" alt=""
                        srcset="">
                </div>
                <p>一杯咖啡中，98%咖啡是一种讲究新鲜度的饮品，它的敌人是氧、光、热和潮湿。为了保证咖啡的新鲜度，应在室温下将咖啡放置于避光、密封的容器里保存。您可以用这种方式保存咖啡达一个星期之久。为了获得更好的效果，磨好的咖啡粉应该立即使用。
                </p>
                <p style="font-weight: 600;">水越纯净，越能制作出一杯好咖啡。</p>
            </div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
@import url(../../static/style/reset.css);
@import "../../static/style/variable.scss";

body {
    background-color: #ccc;

    .knowledge {
        position: relative;
        width: 100%;
        // height: 1000000px;
        background-color: #edebe9;


        .konw-img {
            width: 100%;
            height: 13.3333rem;

            img {
                width: 100%;
                height: 100%;
            }


        }

        .konw-con {
            position: absolute;
            top: 213px;
            left: 34px;
            width: 82%;
            // height: 1000000px;
            background-color: #fff;
            font-size: 13px;
            padding: 2.1333rem;
            line-height: 1.6;

            .konw-title1 {
                h1 {
                    text-align: center;
                }

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title2 {
                margin-top: 1.3333rem;

                p {
                    margin-top: 1.3333rem;
                }
            }

            .konw-title3 {
                margin-top: 1.3333rem;

                i {
                    margin-top: 1.3333rem;
                    font-weight: 600;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title3-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }

            .konw-title4 {
                margin-top: 1.3333rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title4-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }

                ul {
                    margin: 1.3333rem auto;
                    list-style: circle;
                    margin-left: 1rem;
                }
            }

            .konw-title5 {
                margin-top: 22rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title5-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }


            }

            .konw-title6 {
                margin-top: 2rem;

                h1 {
                    margin-top: 1.3333rem;
                }

                p {
                    margin-top: 1.3333rem;
                }

                .title6-img {
                    margin-top: 2rem;
                    width: 100%;
                    height: 10.3333rem;

                    img {
                        width: 100%;
                        height: 100%;
                    }
                }


            }
        }
    }
}
</style>



<script lang="ts" setup>
const onClickLeft = () => history.back();

</script>